import { PureComponent } from 'react';
import moment from 'moment';
import styles from './StaffInfoList.less';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    DatePicker,
    Icon,
    Button
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};
let trainChangeInput = null;
@Form.create({
	onValuesChange(props, changedValues, allValues){
		if(trainChangeInput == null) {
			trainChangeInput = changedValues;
		}else {
			Object.assign(trainChangeInput,trainChangeInput,changedValues);
		}
	}
})
class UpdateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	   	if(props.values) {
	    	this.state = {
		    	trainList:props.values
		    }
	    }else {
	    	this.state = {
		    	trainList:[]
		    }
	    }
	}
 	
 	componentWillReceiveProps(nextProps) {
		if(undefined != nextProps.values && nextProps.values !== this.props.values) {
	      this.setState({trainList: [...nextProps.values,{id: '1',punid: ''}]});
		}
		
	}

	handleLocalUpdate = (event,res) => {
		event.preventDefault();
		const { form,handleUpdateByTrain } = this.props;

	    form.validateFields((err, fieldsValue) => {
	        if (err) return;
		    form.resetFields();
		    if(trainChangeInput == null) {
				fieldsValue.id = res.id;
				fieldsValue.punid = res.punid;
				fieldsValue.training_course = res.training_course;
				fieldsValue.training_start_time = res.training_start_time;
				fieldsValue.training_end_time = res.training_end_time;
				fieldsValue.training_duration = res.training_duration;
				fieldsValue.training_mechanism_name = res.training_mechanism_name;
				fieldsValue.examination_results = res.examination_results;
				fieldsValue.training_address = res.training_address;
				fieldsValue.training_type = res.training_type;
			}else {
				Object.assign(fieldsValue,res,trainChangeInput);
			}
		    if(fieldsValue.training_start_time) {
      			fieldsValue.training_start_time = moment(moment(fieldsValue.training_start_time)._d).format("YYYY-MM-DD");
      		}
			if(fieldsValue.training_end_time) {
      			fieldsValue.training_end_time = moment(moment(fieldsValue.training_end_time)._d).format("YYYY-MM-DD");
      		}
		    handleUpdateByTrain(fieldsValue);
		});
	};
	
	
	trainList = () => {
		const { handleTrain,trainCurrentIndex,cancelTrain,handleDeleteByTrain } = this.props;
  		const { getFieldDecorator } = this.props.form;
  		const _this = this;
  		return this.state.trainList.map(function(res,index) {
			const editTrain = res.id == trainCurrentIndex ? true:false;
		  	return (
				<div style={res.id != 1?{display: 'block',marginBottom:'0'}:{display: 'none',marginBottom:'0'}}>
			      	<div className={styles.eduContainer}>
			      		<span>培训{index + 1}</span>
			      		<div style={{float: "right"}}>
			      			<div className={styles.eduEdit} onClick={handleTrain.bind(_this,res)}>
			      				<Icon type="edit"/>编辑
			      			</div>
			      			<Icon type="delete" style={{fontSize: '16px',color: '#c0c4cc'}} onClick={handleDeleteByTrain.bind(_this,res)}/>
			      		</div>
			      	</div>
			      	<Form layout="vertical" style={editTrain?{display: "block"}:{display: 'none'}}>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

						        <Col  md={12} sm={24}>
							        <FormItem  label="培训课程">
							            {getFieldDecorator('training_course', {
							            rules: [{ required: true, message: '请输入1-50位字符的课程名称', max: 50}],
							            initialValue: res.training_course,
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
								    <Col md={12} sm={24}>
							          <FormItem  label="培训开始时间">
							              {getFieldDecorator('training_start_time',{
							              	initialValue: res.training_start_time?moment(res.training_start_time):null,
							              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
							          </FormItem>
							      </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
								    <Col md={12} sm={24}>
							          <FormItem  label="培训结束时间">
							              {getFieldDecorator('training_end_time',{
							              	initialValue: res.training_end_time?moment(res.training_end_time):null,
							              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
							          </FormItem>
							      </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="培训时长">
							            {getFieldDecorator('training_duration', {
							            rules: [{ required: true, message: '最多输入10位字符', max: 10}],
							            initialValue: res.training_duration,
							            })(<Input placeholder="1-10位字符" />)}
							        </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="培训机构名称">
							            {getFieldDecorator('training_mechanism_name', {
							            rules: [{ required: false, message: '最多输入10位字符', max: 10}],
							            initialValue: res.training_mechanism_name,
							            })(<Input placeholder="1-10位字符" />)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="考核结果">
							            {getFieldDecorator('examination_results', {
							            rules: [{ required: true, message: '最多输入50位字符', max: 50}],
							            initialValue: res.examination_results,
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="培训地点">
							            {getFieldDecorator('training_address', {
							            rules: [{ required: false, message: '最多输入50位字符', max: 50}],
							            initialValue: res.training_address,
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="培训方式">
							            {getFieldDecorator('training_type', {
							            rules: [{ required: true, message: '最多输入50位字符', max: 50}],
							            initialValue: res.training_type,
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
							
					    	</Row>
							<Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{marginBottom: '30px'}}>
							
							    <Col md={12} sm={24}>
							    	<Button 
					            	size="large" 
					            	style={{marginRight: '10px'}}
					            	onClick={()=> {
					            		const { form } = _this.props;
		  								form.resetFields();
					            		cancelTrain();
					            	}}>
					            	取消
					           		</Button>
							        <Button size="large" type="primary" onClick={()=>_this.handleLocalUpdate(event,res)}>保存</Button>
						        </Col>
						        
						    </Row>
			
						</Form>
						<Form  {...formItemLayout} style={editTrain?{display: "none"}:{display: 'block'}}>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

						        <Col  md={12} sm={24}>
							        <FormItem  label="培训课程">
							            {getFieldDecorator('training_course',{
							            	rules: [{ message: '请输入1-50位字符的课程名称', max: 50}],
							            })(<span>{res.training_course}</span>)}
							        </FormItem>
						        </Col>
								    <Col md={12} sm={24}>
							          <FormItem  label="培训开始时间">
							              {getFieldDecorator('training_start_time')(<span>{res.training_start_time?moment(res.training_start_time).format('YYYY-MM-DD'):null}</span>)}
							          </FormItem>
							      </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
								    <Col md={12} sm={24}>
							          <FormItem  label="培训结束时间">
							              {getFieldDecorator('training_end_time')(<span>{res.training_end_time?moment(res.training_end_time).format('YYYY-MM-DD'):null}</span>)}
							          </FormItem>
							      </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="培训时长">
							            {getFieldDecorator('training_duration',{
							            	rules: [{ message: '最多输入10位字符', max: 10}],
							            })(<span>{res.training_duration}</span>)}
							        </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="培训机构名称">
							            {getFieldDecorator('training_mechanism_name',{
							            	rules: [{ required: false, message: '最多输入10位字符', max: 10}],
							            })(<span>{res.training_mechanism_name}</span>)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="考核结果">
							            {getFieldDecorator('examination_results',{
							            	rules: [{ message: '最多输入50位字符', max: 50}],
							            })(<span>{res.examination_results}</span>)}
							        </FormItem>
						        </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="培训地点">
							            {getFieldDecorator('training_address',{
							            	rules: [{ required: false, message: '最多输入50位字符', max: 50}],
							            })(<span>{res.training_address}</span>)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="培训方式">
							            {getFieldDecorator('training_type',{
							            	rules: [{ message: '最多输入50位字符', max: 50}],
							            })(<span>{res.training_type}</span>)}
							        </FormItem>
						        </Col>
							
					    	</Row>
		
						</Form>
		      	</div>
		  	)
		
		});
  	}

  render() {

return (
	<div>
		{this.trainList()}
	</div>
);
  }

}

export default UpdateForm;
